<script type="text/javascript" src="/js/extlibs/jquery.jsrepeater.js"></script>
<script type="text/javascript" src="/js/gradua/ria.js"></script>
<script type="text/javascript" src="/js/gradua/ria.buildItem.js"></script>
<script type="text/javascript" src="/js/gradua/ria.buildList.js"></script>
<script type="text/javascript" src="/js/gradua/ria.formatter.js"></script>
<script type="text/javascript" src="/js/gradua/ria.extraCommands.js"></script>
<script>
    var roles = {};
    $(document).ready(function() {
        roles.data = <?php echo json_encode($roles) ?>;
        roles.permissions = <?php echo json_encode($permissions) ?>;
        roles.newItem = ria.buildItem()
        .setJsObjName('roles.newItem')
        .setDs(<?php $p = new Role(); echo json_encode($p->toArray()) ?>)
        .setElement($('#new'))
        .setTpls({
            view: "<?php echo $roleViewTpl ?>",
            form: "<?php echo $roleFormTpl ?>"
        })
        .setDecorators({
            edit: "<?php echo $editDecorator ?>",
            insert: "<?php echo $insertDecorator ?>",
            view: "<?php echo $viewDecorator ?>"
        })
        .setViews({
            view:   {tpl:'view',decorator:'view'},
            edit:   {tpl:'form',decorator:'edit'},
            insert: {tpl:'form',decorator:'insert'}
        })
        .setExtraTplValue('_objRequestName','role')
        .setExtraTplValue('_formId','form-new-role')
        .setActualView('insert')
        .bind('postDisplay', function(spec) {
            this.markCheckboxes()
            if(spec.ds.general) {$('#general' + spec.ds.id).show();}
        })
        .bind('extraValues', function(ds) {
            ds.permissions = roles.permissions;
            for(i in ds.permissions) {
                ds.permissions[i]._objRequestName = ds._objRequestName;
                ds.permissions[i].checked = false;
                for(u in ds.RolePermission) {
                    if(ds.RolePermission[u].permission_id == ds.permissions[i].id) {
                        ds.permissions[i].checked = true;
                    }
                }
            }
        });

        //DUPLICA CONFIGURAÇÕES DO NOVO ITEM PARA USAR COMO ITEM DA LISTA.
        var listItem = roles.newItem.copy();
        //ADICIONA COMANDOS EXTRAS À LISTA.
        listItem.addCommand('mouseOver', function(spec, params){
           this.getElement().addClass('itemHover');
        }).addCommand('mouseOut', function(spec, params){
            this.getElement().removeClass('itemHover');
        });
        //ADICIONA COMANDOS RELEVANTES À AMBOS. SE ADICIONAR ANTES OS COMANDOS, ESTÁ DANDO PROBLEMA.
        ria.addItemCommands([roles.newItem,listItem],
            {
                insertAction:'roles/insert',
                editAction:'roles/edit',
                removeAction:'roles/remove'
            }
        );

        roles.list = ria.buildList()
        .setJsObjName('roles.list')
        .setDs({listId:"roles-list"})
        .setItemId('roles-list-item-')
        .setItemsDs(roles.data)
        .setElement($('#local'))
        .setRiaObject(listItem.setActualView('view'))
        .setExtraItemTplValues({
            _jsObjName : 'roles.list.getItem(${dsId})',
            _objRequestName : 'role',
            _formId : 'form-role-${dsId}'
        })
        .setTpls({list: "<?php echo $listTpl ?>"})
        .setItemDecorators({div: "<?php echo $divListItemDecorator ?>"})
        .setViews({list:  {tpl:'list',itemDecorator:'div'}})
        .display('list');
        ria.addListCommands([roles.list]);
    });
</script>
<style>
#container{
    width: 750px;
    height: 500px;
    overflow: auto;
    border: solid 1px;
    padding: 10px;
}
.dirFound{
   background-color: #beb;
}
.dirNotFound{
   background-color: #ebb;
}
</style>
<h3>Roles</h3>
<a href='javascript:;' onclick='roles.newRole.show()'/>new</a>
<div id='local'></div>
<div id='new'></div>

